import React, { Component } from 'react';
import { HeaderBox } from './style'

class Header extends Component {

  state = {
    actvie: ['active', ''],
    sliderArr: ['slider', 'slider right'],
    sliderIndex: 0
  }

  changeNav(index) {
    // 清空所有的样式
    const actvie = this.state.actvie.map(item => '')
    // 针对于当前你所点击的位置，进行添加样式
    actvie[index] = 'active'
    this.setState({
      actvie,
      sliderIndex: index
    })

    // 修改当前的切源数据源
    this.props.setListDataIndex(index)
  }

  render() {
    return (
      <HeaderBox>
        <ul>
          <li onClick={() => this.changeNav(0)} className={this.state.actvie[0]}>分类</li>
          <li onClick={() => this.changeNav(1)} className={this.state.actvie[1]}>食材</li>
          <li className={this.state.sliderArr[this.state.sliderIndex]}></li>
        </ul>
      </HeaderBox>
    );
  }
}

export default Header;
